<template>
  <view class="user">
    <view class="header acea-row row-between-wrapper">
      <view>
        <img src="../../assets/imges/userBackgroundImg.png" style="width: 750rpx; height: 500rpx" mode="scaleToFill" />
        <view class="user-info">
          <view class="pictrue user-img">
            <image
              src="https://thirdwx.qlogo.cn/mmopen/vi_32/UYR90dO4ge3vRbvxo8Ul1xLvm4v0iapJdpkhRS9FyFAHC8WeoUnN8o0q8otn3nrrSThIY3icqAWGLpW6tNANlMibQ/132"
            />
          </view>
          <text class="user-name"> 微信名称 </text>
        </view>
      </view>
    </view>
    <view class="content">
      <!-- 我的订单 -->
      <view class="card-content">
        <view class="card-title acea-row row-between-wrapper">
          <text class="txt">我的订单</text>
        </view>
        <view class="card-items acea-row row-middle">
          <view @click="goMyOrder(0)" class="item">
            <view class="pictrue">
              <image
                src="https://djwk-o2o.oss-cn-shenzhen.aliyuncs.com/weixin_static/all_orders.png"
                mode="aspectFit"
              ></image>
              <text class="order-status-num" v-if="userInfo.orderStatusNum.unpaidCount > 0">{{
                userInfo.orderStatusNum.unpaidCount
              }}</text>
            </view>
            <view>全部订单</view>
          </view>
          <view @click="goMyOrder(1)" class="item">
            <view class="pictrue">
              <image
                src="https://djwk-o2o.oss-cn-shenzhen.aliyuncs.com/weixin_static/pending_payment.png"
                mode="aspectFit"
              ></image>
            </view>
            <view>处理中</view>
          </view>
          <view @click="goMyOrder(2)" class="item">
            <view class="pictrue">
              <image
                src="https://djwk-o2o.oss-cn-shenzhen.aliyuncs.com/weixin_static/tobedelivered.png"
                mode="aspectFit"
              ></image>
            </view>
            <text>已完成</text>
          </view>
          <!-- <view @click="goMyOrder(4)" class="item">
            <view class="pictrue">
              <image
                src="https://djwk-o2o.oss-cn-shenzhen.aliyuncs.com/weixin_static/completed.png"
                mode="aspectFit"
              ></image>
            </view>
            <text>已完成</text>
          </view>
          <view @click="goReturnList()" class="item">
            <view class="pictrue">
              <image
                src="https://djwk-o2o.oss-cn-shenzhen.aliyuncs.com/weixin_static/after_sale.png"
                mode="aspectFit"
              ></image>
            </view>
            <text>售后/退款</text>
          </view> -->
        </view>
      </view>

      <view class="card-content">
        <view class="card-title acea-row row-between-wrapper">
          <text class="txt">常用功能</text>
        </view>
        <u-cell-group>
          <u-cell
            icon="fingerprint"
            iconStyle="font-size: 32rpx"
            titleStyle="font-size: 24rpx"
            title="我的预约"
            isLink
            url="/homePages/appoint/index"
          ></u-cell>
          <u-cell
            icon="bell"
            iconStyle="font-size: 32rpx"
            titleStyle="font-size: 24rpx"
            title="消息中心"
            isLink
            url="/homePages/message/index"
          ></u-cell>
          <u-cell
            icon="bookmark"
            iconStyle="font-size: 32rpx"
            titleStyle="font-size: 24rpx"
            title="健康档案"
            isLink
            url="/homePages/appoint/index"
          ></u-cell>
          <u-cell
            icon="man-add"
            iconStyle="font-size: 32rpx"
            titleStyle="font-size: 24rpx"
            title="服务记录"
            isLink
            url="/homePages/serve/index"
          ></u-cell>
          <u-cell
            icon="phone"
            iconStyle="font-size: 32rpx"
            titleStyle="font-size: 24rpx"
            title="联系人管理"
            isLink
            url="/homePages/appoint/index"
          ></u-cell>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // mounted(){
  //   uni.navigateTo({
  //           url: '/homePages/appoint/index'
  //         })
  // },
  methods: {
    goMyOrder(type) {
      uni.navigateTo({
        url: '/homePages/order/index?type=' + type
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
  // height: 100%;
  height: 100vh;
  background: #f5f5f5;
  .header {
    height: 300upx;
    position: relative;
    .user-info {
      position: absolute;
      display: flex;
      flex-direction: row;
      top: 122rpx;
      left: 37rpx;
      align-items: center;
      .user-img {
        position: relative;
        width: 115rpx;
        height: 115rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 3rpx solid #f5f5f5;
        }
      }
      .user-name {
        margin-left: 20upx;
      }
    }
  }
  .content {
    position: absolute;
    width: 100%;
    padding: 0 20rpx;
    .card-content {
      width: 689rpx;
      background-color: #fff;
      border-radius: 36rpx;
      margin: 32rpx auto;
      .card-title {
        height: 88rpx;
        padding: 20rpx 0 8rpx 38rpx;
        font-size: 30rpx;
        color: #282828;
        .txt {
          font-size: 29rpx;
          font-weight: bold;
          color: #060709;
        }
      }
      .card-items {
        height: 140rpx;
        padding-bottom: 10px;
        .item {
          font-size: 26rpx;
          color: #454545;
          flex: 1;
          -o-flex: 1;
          -ms-flex: 1;
          text-align: center;
          .pictrue {
            position: relative;
            width: 49rpx;
            height: 42rpx;
            margin: 0 auto 18rpx auto;
            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
